<template>
  <div>
    <h2>这是购物车页面</h2>
    <ul>
      <li v-for="item in goods" :key="item.id">
        <nuxt-link :to="`/detail/${item.id}`">{{ item.text }}</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  // 前后端都会执行，时间点在beforeCreate之前
  // 传递一个上下文对象
  // 会和data合并
  // 里面不能使用this访问组件实例，因为此时该实例还未创建
  async asyncData({ $axios, error }) {
    try {
      const { ok, goods } = await $axios.$get("/api/goods");
      console.log(goods)
      if (ok) {
        return { goods };
      }
      // 错误处理
      error({ statusCode: 400, message: "数据查询失败" });
    } catch (err) {
      error(err)
    }
  },
  head() {
    return {
      title: "购物车页面",
      meta: [
        {
          name: "description",
          hid: "description",
          content: "set pagemeta"
        }
      ],
      link: [
        {
          rel: "favicon",
          href: "favicon.ico"
        }
      ]
    };
  }
};
</script>
